<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>슬라이더바를 사용한 컨텐츠 보기</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<style> 
* {margin:0px; padding:0px;}

#wrap { 
	width:600px;	
	overflow:hidden;
	background:#CF0;
}
#content {height:300px;}

#scrollBar {
	width:600px;
	height:30px;
	background:#06C;	
}
#bar{
	width:30px;
	height:30px;
	background:#FF0;	
}

#content {	position:relative;	};

</style>
</head>

<body>
<div id = "wrap">
  <div id="content"> <img src="pg.jpg" /> </div>
  
  <div id ="scrollBar">
    <div id="bar"></div>
  </div> 
  
</div>

<script>

</script>
</body>
</html>
